<div class="footer">
    <div id="autocomplete">{{! autocomplete root containter, also blocks mouse events to rest of app while active }}
        <div id="autocomplete-spacer">{{!--
            invisible inline-block spacer div, shrinks to fit content width
            populated with copy of left portion of input command before autocomplete target range
            this positions autocomplete UI exactly at the point that it will insert/replace into
        --}}</div>{{!-- no whitespace allowed here! it'll add a space and mess up the positioning
        --}}<div id="autocomplete-ui">
            <div id="autocomplete-popup" class="notSelectable">
                <div id="autocomplete-legend">
                    Legend: <b>alias</b> | <u>argument</u> | <i>optional</i>
                </div>
                <div id="autocomplete-suggests"></div>
                <div id="autocomplete-instruction">
                    <span id="autocomplete-instruction-navigate">[&#x2191;/&#x2193;] to navigate</span>
                    <span id="autocomplete-instruction-select">[tab] to select</span>
                    <span id="autocomplete-instruction-commit">[tab] to commit</span>
                    <span id="autocomplete-instruction-revert">[esc] to go back</span>
                    <span id="autocomplete-instruction-cancel">[esc] to cancel</span>
                </div>
            </div>
            <div id="autocomplete-footer">
                <input id="autocomplete-output" size="1"
                    disabled="disabled" />{{!-- no whitespace
                --}}<input id="autocomplete-input" size="15"
                    placeholder="search commands"
                    autocapitalize="off"
                    autocorrect="off"
                    autocomplete="off"
                    spellcheck="false" />{{!-- no whitespace
                --}}<span id="autocomplete-footer-fade"></span>
            </div>
        </div>
    </div>

    <input id="command"
           placeholder="enter aircraft command"
           autocapitalize="off"
           autocorrect="off"
           autocomplete="off"
           spellcheck="false"
           autofocus />
    {{!-- move to ul li.hlist --}}

    <ul class="controls-menu">
        <li class="control-item">
            <a class="control-icon fast-forwards">
                <img src="assets/images/icons/fast-forwards.png" />
            </a>
        </li>
        <li class="control-item">
            <a class="control-icon toggle-pause" title="Pause simulation">
                <img src="assets/images/icons/pause.png" />
            </a>
        </li>
        <li class="control-item">
            <a class="control-icon switch-airport" title="Switch airport">
                <img src="assets/images/icons/airport.png" />
            </a>
        </li>
        <li class="control-item">
            <a class="control-icon">
                <img src="assets/images/icons/scope.png" />
            </a>
            <div class="control-item-content">
                <a class="control toggle-labels">
                    <img src="assets/images/icons/labels.png" />
                    <span>Fixes & Runways</span>
                </a>
                <a class="control toggle-sids">
                    <img src="assets/images/icons/sids.png" />
                    <span>SID display</span>
                </a>
                <a class="control toggle-stars">
                    <img src="assets/images/icons/stars.png" />
                    <span>STAR display</span>
                </a>
                <a class="control toggle-airspace">
                    <img src="assets/images/icons/airspace.png" />
                    <span>Airspace Depiction</span>
                </a>
                <a class="control toggle-restricted-areas">
                    <img src="assets/images/icons/restricted.png" />
                    <span>Restricted Areas</span>
                </a>
                <a class="control toggle-terrain active">
                    <img src="assets/images/icons/terrain.png" />
                    <span>Terrain</span>
                </a>
                <a class="control toggle-video-map">
                    <img src="assets/images/icons/map.png" />
                    <span>Video Maps</span>
                </a>
                </a>
            </div>
        </li>
        <li class="control-item">
            <a class="control-icon">
                <img src="assets/images/icons/cog.png" />
            </a>
            <div class="control-item-content">
                <a class="control" id="toggle-options">
                    <img src="assets/images/icons/cog.png" />
                    <span>Settings</span>
                </a>
                <a class="control toggle-speech">
                    <img src="assets/images/icons/speech.png" />
                    <span>Speech</span>
                </a>
                <a class="control toggle-traffic">
                    <img src="assets/images/icons/traffic.png" />
                    <span>Traffic</span>
                </a>
            </div>
        </li>
        <li class="control-item">
            <a class="control-icon">
                <img src="assets/images/icons/questionmark.png" />
            </a>
            <div class="control-item-content">
                <a class="control toggle-airport-guide">
                    <img src="assets/images/icons/airport-guide.png" />
                    <span>Airport Guide</span>
                </a>
                <a class="control" href="https://github.com/openscope/openscope/blob/develop/documentation/commands.md" target="_blank">
                	<img src="assets/images/icons/command-reference.png"/>
                	<span>Commands</span>
                </a>
                <a class="control toggle-tutorial">
                    <img src="assets/images/icons/tutorial.png" />
                    <span>Tutorial</span>
                </a>
                <a class="control js-changelogToggle">
                    <img src="assets/images/icons/changelog.png" />
                    <span>Changelog</span>
                </a>
                <a class="control" href="http://slack.openscope.io/" target="_blank">
                	<img src="assets/images/Slack_Mark_Monochrome_White_36px.png"/>
                	<span>Chat With Us</span>
                </a>
                <a class="control" href="https://github.com/openscope/openscope" id="js-github-external-link" target="_blank">
                    <img src="assets/images/GitHub-Mark-Light-32px.png" class="github-logo" />
                    <span>GitHub</span>
                </a>
            </div>
        </li>
    </ul>
    <div id="score" class="notSelectable" title="Score">-</div>
</div>
